<template>
  <div>
    <h1>登陆页面</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">帐号</td>
          <td><input type="text" v-model="info.userName" /></td>
        </tr>
        <tr>
          <td align="right">密码</td>
          <td><input type="password" v-model="info.userPwd" /></td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="登陆"
              class="btn btn-primary"
              @click="login"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
//引入
import { useStore } from '@/stores/user';
//useRouter:作用创建出一个路由器 实现页面跳转 并且 可以进行传参
const router = useRouter();
//创建pinia对象
const a = useStore();

let info: any = reactive({
  userName: '',
  userPwd: '',
});

const login = () => {
  //1.有效性验
  if (info.userName == '') {
    alert('帐号不能为空');
    return;
  }
  if (info.userPwd == '') {
    alert('密码不能为空');
    return;
  }
  //2.发送网络请求
  axios({
    url: '/api/Admins/GetAdminModel', //向后端请求的地址
    method: 'get', //请求方式
    // params: {
    //   userName: info.userName,
    //   userPwd: info.userPwd,
    // },
    params: info,
  })
    .then((res) => {
      //then请示成功要调的函数  res请求结果
      console.log(res);
      if (res.data == -1) {
        alert('帐号不存在');
        return;
      } else if (res.data == -2) {
        alert('密码错误');
        return;
      } else {
        //登陆成功要怎么办  1.提示  2.存储用户信息  3.跳转
        alert('登陆成功');
        // location.href=""
        //router.push('路由');
        a.userInfo = res.data;
        router.push('/'); //会员等级增加页面跳  没有会员等级增加页面对应的路由 先造出一条路由
      }
    })
    .catch((err) => {
      //catch请求失败要调的函数  err表示请求错误结果
    });
};
</script>

<style scoped></style>
